<template>
  <div class="login_wrap u-flex-center">
    <div class="index_box u-flex hand" @click="router.push('/index')">
      <img src="../../image/login/index.png" alt="" class="index" />
      首页
    </div>
    <img src="../../image/login/round.png" class="round" />
    <div class="info u-flex-col u-row-center">
      <div class="black">登录</div>
      <el-form
        :model="ruleForm"
        :hide-required-asterisk="true"
        :rules="rules"
        ref="formRef"
        label-position="top"
      >
        <el-form-item label="账号" prop="username" class="custom-label">
          <el-input class="custom-input" v-model="ruleForm.username" placeholder="请输入注册手机号">
            <template #suffix>
              <img src="../../image/login/clear.png" class="clear-icon hand" @click="clear" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="custom-label">
          <el-input :type="passwordType" v-model="ruleForm.password" placeholder="请输入密码">
            <template #suffix>
              <img
                src="../../image/login/eyeB.png"
                @click="eyeClick"
                v-if="passwordType === 'password'"
                class="eye-icon hand"
              />
              <img src="../../image/login/eye.png" v-else @click="eyeClick" class="eye-icon hand" />
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="btn u-flex-center hand" @click="submitForm">登录</div>
    </div>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex'
  import { useRouter, useRoute } from 'vue-router'
  import { ElMessage, ElNotification } from 'element-plus'
  import { ref, onMounted, watch, computed, getCurrentInstance, reactive } from 'vue'

  const appContext = getCurrentInstance().appContext
  const imgUrl = appContext.config.globalProperties.$imgUrl
  const store = useStore()
  const router = useRouter()

  const ruleForm = reactive({
    username: null,
    password: null,
  })
  const formRef = ref(null)
  const passwordType = ref('password')
  const rules = reactive({
    username: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: ['blur', 'change'] },
      {
        pattern: /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).+$/,
        message: '密码是由大小写字母，数字组成',
        trigger: ['blur', 'change'],
      },
    ],
  })

  onMounted(() => {
    scrollToTop()
  })
  const scrollToTop = () => {
    // store.dispatch("home/articleApi").then(res => {
    //     if (res.status == 200) {
    //         console.log("??")
    //     }
    // });
  }

  const submitForm = () => {
    formRef.value.validate(valid => {
      if (valid) {
        store.dispatch('home/loginApi', ruleForm).then(res => {
          if (res.status == 200) {
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('is_super', res.data.is_super) //1超管  0供应商 2采购商
            ElNotification({
              message: res.message,
              type: 'success',
              duration: 1500,
            })
            setTimeout(() => {
              router.push('/index')
            }, 1500)
          } else {
            ElNotification({
              title: '失败',
              message: res.message,
              type: 'error',
              duration: 1500,
            })
          }
        })
      } else {
        console.log('验证失败')
        return false
      }
    })
  }

  const clear = () => {
    ruleForm.username = null
  }

  const eyeClick = () => {
    passwordType.value = passwordType.value === 'password' ? 'text' : 'password'
  }
</script>

<style scoped lang="less">
  // 兼容
  @media screen and (max-width: 1920px) {
    // label文字
    :deep(.el-form-item__label) {
      font-size: 14px !important;
      // margin-bottom: 11px;
    }
    // 输入外框
    :deep(.el-input__wrapper) {
      height: 45px !important;
      border-radius: 10px !important;
    }
    // 输入框文字
    :deep(.el-input__inner) {
      font-size: 14px !important;
    }
    // 红色提示文字
    :deep(.el-form-item__error) {
      margin-top: 2px !important;
    }

    .login_wrap {
      .index_box {
        top: 13px !important;
        left: 13px !important;
        font-size: 14px !important;

        .index {
          width: 20px !important;
        }
      }

      .round {
        width: 530px !important;
        margin-right: 250px !important;
      }

      .info {
        width: 390px !important;
        border-radius: 35px !important;
        padding: 0 25px !important;

        .black {
          font-size: 24px !important;
          margin-bottom: 30px !important;
        }

        .custom-label {
          margin-bottom: 17px !important;
        }

        .clear-icon {
          width: 20px !important;
        }
        .eye-icon {
          width: 23px !important;
        }

        .btn {
          height: 45px !important;
          border-radius: 10px !important;
          margin-top: 15px !important;
          font-size: 14px !important;
        }
      }
    }
  }

  // 兼容1366
  @media screen and (max-width: 1700px) {
    // label文字
    :deep(.el-form-item__label) {
      font-size: 12px !important;
      margin-bottom: 6px !important;
    }
    // 输入外框
    :deep(.el-input__wrapper) {
      height: 35px !important;
      border-radius: 6px !important;
    }
    // 输入框文字
    :deep(.el-input__inner) {
      font-size: 12px !important;
    }

    .login_wrap {
      .index_box {
        font-size: 13px !important;

        .index {
          width: 18px !important;
          margin-right: 5px !important;
        }
      }

      .round {
        width: 430px !important;
        margin-right: 170px !important;
      }

      .info {
        width: 350px !important;
        aspect-ratio: 16/16.7 !important;
        border-radius: 25px !important;
        padding: 0 15px !important;

        .black {
          font-size: 20px !important;
          margin-bottom: 20px !important;
        }

        .clear-icon {
          width: 16px !important;
        }
        .eye-icon {
          width: 18px !important;
        }

        .btn {
          height: 35px !important;
          border-radius: 6px !important;
          margin-top: 13px !important;
          font-size: 12px !important;
        }
      }
    }
  }

  // label文字
  :deep(.el-form-item__label) {
    font-size: 16px;
    color: #333;
    margin-bottom: 11px;
  }
  // 输入外框
  :deep(.el-input__wrapper) {
    height: 53px;
    border-radius: 13px;
  }
  // 输入框文字
  :deep(.el-input__inner) {
    color: #202020;
    font-size: 16px;
  }
  // 红色提示文字
  :deep(.el-form-item__error) {
    margin-top: 3px;
  }
  // 输入框聚焦时蓝色边框
  :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #5463ff inset !important;
  }

  .login_wrap {
    width: 100vw;
    height: 100vh;
    background-image: url('@/image/login/bg.png');
    background-size: 100% 100%;
    position: relative;

    .index_box {
      position: absolute;
      top: 15px;
      left: 15px;
      font-size: 15px;
      color: #5463ff;

      .index {
        width: 23px;
        height: auto;
        margin-right: 6px;
      }
    }

    .round {
      width: 662px;
      height: auto;
      margin-right: 400px;
    }

    .info {
      width: 483px;
      aspect-ratio: 16/17;
      border-radius: 42px;
      padding: 0 38px;
      text-align: center;
      background: rgba(255, 255, 255, 0.7);

      .black {
        color: #202020;
        font-size: 26px;
        margin-bottom: 35px;
      }

      .custom-label {
        margin-bottom: 20px;
      }

      .custom-input:hover {
        .clear-icon {
          display: block;
        }
      }

      .clear-icon {
        width: 25px;
        height: auto;
        display: none;
      }
      .eye-icon {
        width: 27px;
        height: auto;
      }

      .btn {
        width: 100%;
        height: 53px;
        border-radius: 13px;
        color: #fff;
        margin-top: 20px;
        font-size: 16px;
        background: #5463ff;
      }
    }
  }
</style>
